<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="../dist/css/zui.min.css">
    <link rel="stylesheet" href="../docs/css/doc.css">
    <script type="text/javascript" src="../assets/jquery.js"></script>
    <script type="text/javascript" src="../dist/js/zui.js"></script>
</head>
<body>
<ul class="nav nav-primary">
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">动态 <span class="label label-badge label-success">4</span></a></li>
    <li><a href="#">项目 </a></li>
    <li>
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">更多 <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#">任务</a></li>
            <li><a href="#">bug</a></li>
            <li><a href="#">需求</a></li>
            <li><a href="#">用例</a></li>
        </ul>
    </li>
</ul>
<div class="example" style="margin-top: 50px;">
    <div class="input-group" style="width: 250px;">
        <input type="text" class="form-control" placeholder="用户名">
        <span class="input-group-addon">@gmail.com</span>
    </div>
    <div class="input-group" style="width: 250px;">
        <input type="text" class="form-control" placeholder="用户名">
        <span class="input-group-addon"><i class="icon icon-star"></i></span>
    </div>
    <div class="input-group" style="width: 250px;">
        <input type="text" class="form-control" placeholder="密码">
    </div>
    <div class="input-group" style="width: 250px;">
        <span class="input-group-addon"><i class="icon icon-user"></i></span>
        <input type="text" class="form-control" placeholder="用户名">
        <span class="input-group-addon"><i class="icon icon-key"></i></span>
        <input type="text" class="form-control" placeholder="密码">
    </div>
    <div class="input-group" style="width: 250px;">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" placeholder="用户名">
    </div>
</div>
<div class="example">
    <div class="row">
        <div class="col-md-4">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="用户名">
                <span class="input-group-addon">@gmail.com</span>
            </div><br>
            <div class="input-group">
                <span class="input-group-addon">@</span>
                <input type="text" class="form-control" placeholder="用户名">
            </div><br>
            <div class="input-group">
                <span class="input-group-addon">@</span>
                <input type="text" class="form-control" placeholder="用户名">
                <span class="input-group-addon"><i class="icon icon-star"></i></span>
            </div>
        </div>
        <div class="col-md-6">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="用户名">
                <span class="input-group-addon"><i class="icon icon-user"></i></span>
                <input type="text" class="form-control" placeholder="密码">
            </div><br>
            <div class="input-group">
                <span class="input-group-addon"><i class="icon icon-user"></i></span>
                <input type="text" class="form-control" placeholder="用户名">
                <span class="input-group-addon fix-border"><i class="icon icon-user"></i></span>
                <input type="text" class="form-control" placeholder="密码">
            </div><br>
            <div class="input-group">
                <span class="input-group-addon"><i class="icon icon-user"></i></span>
                <input type="text" class="form-control" placeholder="用户名">
                <span class="input-group-addon fix-border"><i class="icon icon-user"></i></span>
                <input type="text" class="form-control" placeholder="密码">
                <span class="input-group-addon"><i class="icon icon-user"></i></span>
            </div>
        </div>
    </div>
</div>
<div class="example">
    <div class="input-group">
        <span class="input-group-addon">姓名</span>
        <input type="text" class="form-control" placeholder="姓氏">
        <span class="input-group-addon fix-border"></span>
        <input type="text" class="form-control" placeholder="名字">
    </div>
</div>
<section>
    <header>
        <h3>单选框和复选框 </h3>
        <article>
            <div class="example">
                <div class="row"></div>
                <div class="input-group">
                    <span class="input-group-addon"><input type="checkbox" /></span>
                    <input type="text" class="form-control" />
                </div>
            </div>
        </article>
    </header>
</section>
</body>
</html>